<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>系统日志</title>
    <link rel="stylesheet" href="../element/latest/element.css" media="all">
    <link rel="stylesheet" href="../vue-table/3.2.1/style.css" media="all">
    <link rel="stylesheet" href="../../../editor/assets/drag/js/user/iframe/magicalcoder/components/magicalcoder.css" media="all">
    <link rel="stylesheet" href="../../../editor/assets/drag/js/user/iframe/element/latest/components/mc-official.css" media="all">
    <script type="text/javascript" src="../vue/es6-promise.auto.min.js"></script>
    <script type="text/javascript" src="../vue/es6-promise.auto.min.js"></script>
    <script type="text/javascript" src="../vue/browser.min.js"></script>
    <script type="text/javascript" src="../vue/browser-polyfill.min.js"></script>
    <script type="text/javascript" src="../vue/vue.js"></script>
    <script type="text/javascript" src="../vue/axios.js"></script>
    <script type="text/javascript" src="../element/latest/element.js"></script>
    <script type="text/javascript" src="../vue-table/3.2.1/xe-utils.js"></script>
    <script type="text/javascript" src="../vue-table/3.2.1/vxe-table.js"></script>
    <script type="text/javascript" src="../../../editor/assets/drag/js/lib/mc/magicaltool.js"></script>
    <script type="text/javascript" src="../../../editor/assets/drag/js/user/iframe/element/latest/components/mc-official.js"></script>

</head>
<body style="">
<div id="magicalDragScene" class="mc-root" before-create="beforeCreate" created="created"
     before-mount="beforeMount" mounted="mounted" mcstyle="ab-unit:px">
    <el-container style="height:100%">
        <el-header height="80px">
            <el-form mcstyle="ab-unit-top:px;ab-unit-height:px" label-width="100px" size="small" :inline="true">
                <el-form-item label="返回行数">
                    <el-input v-model="rowsNumber" type="number" placeholder="请输入数字"></el-input>
                </el-form-item>
                <el-form-item label="起始值">
                    <el-input v-model="startPos" type="number" placeholder="请输入数字"></el-input>
                </el-form-item>
                <el-form-item label="缓存行数">
                    <el-input v-model="maxLogLine" type="number" placeholder="请输入数字"></el-input>
                </el-form-item>
                <el-form-item label="间隔毫秒">
                    <el-input v-model="sleepTime" type="number" placeholder="请输入数字"></el-input>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-card>
                <div v-for="item in logList" :key="item.key" :style="{backgroundColor:item.index==0?'#1E9FFF':''}">
                    {{item.val}}
                </div>
            </el-card>
            <span id="scrollAssist"></span>
                <!--<el-backtop target=".backtop" :visibility-height="200" />-->
        </el-main>
        <el-footer height="80px">
                <el-button v-if="stop" type="warning" @click="stopLog">暂停</el-button>
                <el-button v-if="open" type="success" @click="openLog">继续</el-button>
                <el-button type="success" @click="clearAll">清空</el-button>
        </el-footer>
    </el-container>
</div>
<script>
    //ajax库采用axios
    //调试:打开浏览器控制台(F12),在代码中某行增加 debugger 即可调试
    var vueData = {rowsNumber: 20,open:false,stop:true,timer:null,logList:[],startPos:-1,sleepTime:1500,maxLogLine:2000};
    //自定义覆盖data
    var myData={};

    vueData.scope={row:{}};vueData.MC=window.MC;Object.assign(vueData, myData);
    window.vueData = vueData;
    window.MC.vdata = vueData;
    var Ctor = Vue.extend({
        data: function() {
            return vueData;
        },
        beforeCreate: function(){window.vueMc=this;window.MC.vue=this;},
        mounted: function(){
            const _this = this
            this.timer = setInterval(function() {
                _this.getLog()
            },_this.sleepTime)
        },
        methods: {
            clearAll:function () {
                this.logList = []
            },
            getLog:function (){
                const _this = this
                if(_this.logList.length>_this.maxLogLine){
                    _this.logList.splice(0,_this.logList.length-_this.maxLogLine);
                }
                this.$magicaltool.request
                    .axios({url:"/magical_lowcode/user/project/online_log/list",method:"post",param:{'limit':this.rowsNumber,startPos:this.startPos}})
                    .then(function (res) {
//                        var list = [];
                        if(res.data){
                            var time = new Date().getTime()+"";
                            var readDto = res.data;
                            _this.startPos = readDto.startPos;
                            if(readDto){
                                var list = readDto.lines;
                                for(var i=0;i<list.length;i++){
                                    _this.logList.push({key:time+i,val:list[i],index:i})
                                }
                            }
                        }

                        _this.$nextTick(function () {
                            document.getElementById("scrollAssist").scrollIntoView();
                        })
                    })
            },
            // 销毁定时任务
            stopLog:function (){
                this.open = true
                this.stop = false
                clearInterval(this.timer)
                this.timer = null
            },
            beforeDestroy:function(){
                clearInterval(this.timer)
                this.timer = null
            },
            openLog:function (){
                const _this = this
                this.open = false
                this.stop = true
                this.timer = setInterval(function() {
                    _this.getLog()
                },_this.sleepTime)
            },
            getLogs:function (){
                const _this = this
                if(Number(this.rowsNumber) > 3000){
                    return this.$message.warning('日志最多返回3000行')
                }
                this.open = false
                this.stop = true
                clearInterval(this.timer)
                this.timer = setInterval(function() {
                    _this.getLog()
                },5000)
                _this.$message.success('已开启定时查看日志，5秒后出现最新日志')
            },
            updateTemplate: function (fileName,path,status,type,id){

            },
            focus : function (e) {
                try {
                    _t.fastKey._triggerClickElem(e);
                }catch(e) {}
            }
        }
    });
    new Ctor().$mount('#magicalDragScene');

</script>
<style>
    /*#magicalDragScene{
        background-color:#fff;
        padding:15px;
    }
    .el-dialog__body{
        overflow: auto;
        height: 90%;
    }
    .wrap {
        height: 100%;
        overflow-x: hidden;
    }*/
</style>
</body>

</html>
